<template>
  <el-card class="box-card" >
    <div slot="header" class="clearfix">
      <el-row :gutter="2">
        <el-col :span="10"><el-button type="primary">导出</el-button></el-col>
        <el-col :span="4"><el-cascader :options="xzhqSelect" clearable  placeholder="请选择师团区划" :show-all-levels="false" :props="{ multiple: true }"></el-cascader></el-col>
        <el-col :span="4"> <el-select v-model="value" clearable multiple placeholder="请选择管控单元分类"  >
          <el-option
            v-for="item in hjgkdy"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select></el-col>
        <el-col :span="4"><el-input
          placeholder="请输入单元编码"
          v-model="input"
          style="float: right;"
          clearable>
        </el-input></el-col>
        <el-col :span="2"><el-button style="float: right;" type="primary">查询</el-button></el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;max-height: 99%;overflow: auto">
      <el-table-column
        type="selection"
       >
      </el-table-column>
      <el-table-column
        type="index"
        label="序"
      >
      </el-table-column>
      <el-table-column
        prop="HJYSGKFQMC"
        label="环境要素管控分区名称"
       >
      </el-table-column>
      <el-table-column
        prop="HJYSGKFQBM"
        label="环境要素管控分区编码"
        >
      </el-table-column>
      <el-table-column
        prop="YSXL"
        label="要素细类"
      >
      </el-table-column>
      <el-table-column
        prop="PROV"
        label="所属省"
       >
      </el-table-column>
      <el-table-column
        prop="CITY"
        label="所属市"
        >
      </el-table-column>
      <el-table-column
        prop="COUNTY"
        label="所属县"
        >
      </el-table-column>
      <el-table-column
        prop="SHAPE_Leng"
        label="几何长度"
      >
      </el-table-column>
      <el-table-column
        prop="SHAPE_Area"
        label="几何面积"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagnum"
      :page-sizes="[5,10, 20, 50]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  import  eventBus from '../../assets/js/eventBus'
  export default {
    name: 'zhglMain',
    data(){
      return{
        input: '',
        mlArr:[],
        queryInfo:{
          Bmquery:'',
          pagnum:1,
          pagesize:10,
        },
        total:100,
        hjgkdy: [{
          value: '1',
          label: '综合生态'
        }, {
          value: '2',
          label: '大气'
        }, {
          value: '3',
          label: '水'
        }, {
          value: '4',
          label: '土壤'
        }, {
          value: '5',
          label: '自然资源'
        }],
        value:[],
        xzhqSelect:[{
          value:'650901',
          label:'生产建设兵团第一师',
          children:[{
            value:'650901001',
            label:'一团'
          },{
            value:'650901002',
            label:'二团'
          },{
            value:'650901003',
            label:'三团'
          },{
            value:'650901004',
            label:'四团'
          },{
            value:'650901005',
            label:'五团'
          },{
            value:'650901006',
            label:'六团'
          },{
            value:'650901007',
            label:'七团'
          },{
            value:'650901008',
            label:'八团'
          },{
            value:'650901009',
            label:'九团'
          },{
            value:'650901010',
            label:'十团'
          },{
            value:'650901011',
            label:'十一团'
          },{
            value:'650901012',
            label:'十二团'
          }]
        },{
          value:'650902',
          label:'生产建设兵团第二师',
          children:[{
            value:'650901001',
            label:'一团'
          },{
            value:'650901002',
            label:'二团'
          },{
            value:'650901003',
            label:'三团'
          },{
            value:'650901004',
            label:'四团'
          },{
            value:'650901005',
            label:'五团'
          },{
            value:'650901006',
            label:'六团'
          },{
            value:'650901007',
            label:'七团'
          },{
            value:'650901008',
            label:'八团'
          },{
            value:'650901009',
            label:'九团'
          },{
            value:'650901010',
            label:'十团'
          },{
            value:'650901011',
            label:'十一团'
          },{
            value:'650901012',
            label:'十二团'
          }]
        },{
          value:'6573',
          label:'生产建设兵团第三师',
          children:[{
            value:'657301',
            label:'四十一团'
          },{
            value:'657302',
            label:'四十二团'
          },{
            value:'657303',
            label:'四十三团'
          },{
            value:'657304',
            label:'四十四团'
          },{
            value:'657305',
            label:'四十五团'
          },{
            value:'657306',
            label:'四十六团'
          },{
            value:'657307',
            label:'四十七团'
          },{
            value:'6573018',
            label:'四十八团'
          },{
            value:'657309',
            label:'四十九团'
          },{
            value:'657310',
            label:'五O团'
          },{
            value:'657311',
            label:'五十一团'
          },{
            value:'657312',
            label:'五十二团'
          },{
            value:'657313',
            label:'五十三团'
          },{
            value:'657314',
            label:'五十四团'
          },{
            value:'650901012',
            label:'伽师总场'
          },{
            value:'650901012',
            label:'东风农场'
          },{
            value:'650901012',
            label:'红旗农场'
          },{
            value:'650901012',
            label:'托云牧场'
          },{
            value:'650901012',
            label:'叶城二牧场'
          },{
            value:'657315',
            label:'小海子水管处'
          },{
            value:'650901012',
            label:'县本级'
          },{
            value:'659003',
            label:'图木舒克市'
          }
          ]
        }],
        tableData:[]
      }

    },
    mounted () {
      eventBus.$on('mlData',(mdata)=>{
        this.mlArr=mdata;
        this.getSjList();
       /* for(let i=0;i<tdata.length;i++){
          console.log(eval('('+tdata[i].content+')'))
          this.tableData.push((eval('('+tdata[i].content+')'))[0])
        }*/
      });
    },
    methods:{
      async getSjList(){
        this.tableData=[];
        const {data:result}= await this.$http.post('/api/v1.0/achievements/findAllByCatalogIdAndAchievementsTypeIds',{achievementsTypeId:1,catalogIds:this.mlArr})
        console.log(result)
        for(let i=0;i<result.data.length;i++){
          console.log(eval('('+result.data[i].content+')'))
          this.tableData.push((eval('('+result.data[i].content+')'))[0])
        }
      },
      handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize;
        this.getSjList()
      },
      handleCurrentChange(newPage){
        this.queryInfo.pagnum=newPage;
        this.getUserList()
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-select__tags,/deep/ .el-cascader__tags {
    flex-wrap: unset;
    overflow: auto;
  }
</style>
